<template>
  <view :class="['question-list-header', { 'fixed-header': isFixed }]" :style="{ top: isFixed ? '0' : 'auto' }">
    <view class="list-title">
      <text class="main-title">{{ title }}({{ count }})</text>
    </view>
    <view class="filter">
      <text class="filter-item1" @click="handleSortClick"> 
        难度
        <text :class="['sort-arrow', { 'highlight': sortOrder === 'desc' }]">↓</text>
        <text :class="['sort-arrow', { 'highlight': sortOrder === 'asc' }]">↑</text> 
      </text>
      <view class="filter-item2" @click="handleFilterClick">
        <text>综合</text>
        <view class="icon">
          <image src="/static/icons/setting.png" mode="aspectFit"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

const props = defineProps({
  title: {
    type: String,
    default: '题目列表'
  },
  count: {
    type: Number,
    default: 0
  },
  sortOrder: {
    type: String,
    default: ''
  },
  isFixed: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['sort', 'filter']);

const handleSortClick = () => {
  emit('sort');
};

const handleFilterClick = () => {
  emit('filter');
};
</script>

<style lang="scss">
.question-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50rpx;
  padding: 20rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #e5e5e5;
  
  &.fixed-header {
    position: fixed;
    left: 0;
    right: 0;
    background-color: #fff;
    border-bottom: 1rpx solid #e5e5e5;
    z-index: 10;
  }
  
  .list-title {
    font-size: 30rpx;
    color: #f6960a;
  }
  
  .filter {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    margin-left: 20rpx;
    color: #666;
    
    .filter-item1 {
      display: inline-block;
      margin-right: 50rpx;
      letter-spacing: 0rpx;
      
      .sort-arrow {
        margin-left: 3rpx;
      }
      
      .highlight {
        color: #ffaa00; 
      }
    }
    
    .filter-item2 {
      display: flex;
      align-items: center;
      
      image {
        margin-left: 10rpx;
        width: 30rpx;
        height: 30rpx;
      }
    }
  }
}
</style>

